import React, { useEffect, useRef, useId } from 'react';
import { gsap } from 'gsap';
import styles from './index.module.scss';

interface LineAnimateProps {
  type?: 'straight' | 'curve' | 'zigzag' | 'circle' | 'spiral';
  width?: number;
  height?: number;
  strokeWidth?: number;
  lineLength?: number;
  color?: string;
  duration?: number;
  repeat?: number;
  ease?: string;
  autoPlay?: boolean;
  className?: string;
}

export default function LineAnimate({
  type = 'straight',
  width = 300,
  height = 200,
  strokeWidth = 1,
  lineLength = 40,
  color = '#667eea',
  duration = 2,
  repeat = -1,
  ease = 'linear',
  autoPlay = true,
  className = '',
}: LineAnimateProps) {
  const pathRef = useRef<SVGPathElement>(null);
  // 使用 useId 来生成唯一的渐变ID，确保服务端和客户端一致
  const gradientId = `opacity-gradient-${useId()}`;

  const generatePath = () => {
    const cx = width / 2, cy = height / 2;
    switch (type) {
      case 'straight':
        return `M20 ${cy} L${width - 20} ${cy}`;
      case 'curve':
        return `M20 ${cy} Q${cx} ${cy - 60} ${width - 20} ${cy}`;
      case 'zigzag':
        let d = `M20 ${cy}`;
        const seg = 6, segW = (width - 40) / seg;
        for (let i = 1; i <= seg; i++) {
          const x = 20 + segW * i;
          const y = cy + (i % 2 ? 40 : -40);
          d += ` L${x} ${y}`;
        }
        return d;
      case 'circle':
        const r = Math.min(width, height) / 3;
        return `M${cx + r} ${cy} A${r} ${r} 0 1 1 ${cx + r - 0.1} ${cy}`;
      case 'spiral':
        let sp = `M${cx} ${cy}`;
        const r0 = Math.min(width, height) / 6;
        for (let i = 1; i <= 6; i++) {
          const ang = (i * Math.PI) / 3;
          const x = cx + Math.cos(ang) * r0 * i;
          const y = cy + Math.sin(ang) * r0 * i;
          sp += ` L${x} ${y}`;
        }
        return sp;
      default:
        return `M20 ${cy} L${width - 20} ${cy}`;
    }
  };

  useEffect(() => {
    if (!pathRef.current) return;
    const pathEl = pathRef.current;
    const d = generatePath();
    pathEl.setAttribute('d', d);

    const total = pathEl.getTotalLength();
    pathEl.style.strokeDasharray = `${lineLength} ${total - lineLength}`;
    pathEl.style.strokeDashoffset = '0';

    if (autoPlay) {
      gsap.to(pathEl, {
        strokeDashoffset: -total,
        duration,
        ease,
        repeat,
      });
    }
  }, [type, width, height, lineLength, duration, ease, autoPlay, repeat]);

  return (
    <div className={`${styles.lineAnimate} ${className}`}>
      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
        {/* 定义从不透明到透明的渐变 */}
        <defs>
          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor={color} stopOpacity=".8" />
            <stop offset="100%" stopColor={color} stopOpacity="0" />
          </linearGradient>
        </defs>
        
        <path
          ref={pathRef}
          fill="none"
          // 使用渐变替代纯色
          stroke={`url(#${gradientId})`}
          strokeWidth={strokeWidth}
          strokeLinecap="round"
        />
      </svg>
    </div>
  );
}
    